<template>
	<view>
		<!-- #ifndef H5 -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">{{detail?detail.name:'拼团详情'}}</block>
		</cu-custom>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="cu-bar fixed" :class="scrollTop > 300?'bg-white':'vtop'" :style="[{height:CustomBar + 'px'}]">
			<view class="action " @tap="BackPage">
				<text class="cuIcon cuIcon-back"></text>
			</view>
			<view class="content ">
				商品详情
			</view>
			<view class="action">
				<text class="cuIcon cuIcon-share" @tap="showShare" v-if="!error && detail"></text>
				<text class="cuIcon cuIcon-more" @tap="showFastModal"></text>
			</view>
		</view>
		<!-- #endif -->
		<block v-if="error">
			<view class="text-center errorview">
				<view>
					<view class="text-gray text-lg">订单信息有误</view>
					<view class="cu-btn round margin-top" :class="'line-'+theme">返回</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="product-swiper relative" :style="'height:'+swiperHeight+'px;'">
				<!-- #ifdef MP-WEIXIN -->
				<view class="absolute vtop">
					<view class="action">
						<button class="sharebtn" open-type="share" v-if="!error && detail">
							<text class="cuIcon cuIcon-share"></text>
						</button>
						<text class="cuIcon cuIcon-more margin-left" @tap="showFastModal"></text>
					</view>
				</view>
				<!-- #endif -->
				<swiper class="screen-swiper" :indicator-dots="false" :autoplay="true" interval="5000" duration="500" @change="swiperChannelHandle"
				 v-if="detail" :style="'height:'+swiperHeight+'px;'">
					<swiper-item v-for="(item,index) in detail.covers" :key="index">
						<image :src="item" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
				<view class="absolute swiper-dot-view text-white" v-if="detail">
					{{swiperCurrent+1}}/{{detail.covers.length}}
				</view>
			</view>
			<!-- <view class="padding-sm  space-between align-center bg-orange" v-if="detail">
				<view>
					<text class="text-price text-white text-xxl">{{detail.type==0?detail.product.wholesale_price:detail.wholesale_price}}</text>
					<text class="cu-tag line-white sm margin-left-sm round">{{detail.num}}人团</text>
				</view>
				<view class="cuIcon cuIcon-share default" @tap="showShare"></view>
			</view>
			<view class="bg-white padding-tb">
				<view class="margin-lr  text-lg product-name" v-if="detail">
					{{detail.type==0?detail.product.name:detail.title}}
				</view>
			</view> -->
			
			<block v-if="detail">
				<view class="flex space-between padding" style="background-color: #f94222;color: #ffffff;">
					<view class=" ">
						<view class="text-price text-xl text-bold">{{detail.product.wholesale_price}}</view>
						<view class="text-decoration text-price">{{detail.product.price?detail.product.price:''}}</view>
					</view>
					<!-- <view class="cu-btn round bg-white text-red">再减￥10</view> -->
					<view class="margin-left text-right">
						<!-- <view>
							<text v-if="detail.marketing_type=='discount'">限时抢购</text>
						</view> -->
						<!-- <view class="" v-if="detail.marketing && detail.marketing.end_time">
							剩余时间：
							<CountDown :value="parseInt(detail.marketing.end_time)" :skin="'skin3'"></CountDown>
						</view> -->
						<!-- <view class="" v-if="liveend != null">
							<text class="flex flex-direction" style="font-size: 12px;">距结束还剩</text>
							<text class="flex flex-direction" style="width: 150px;">
								<text class="djs-color">{{livearr.endday}}</text>天 <text class="djs-color">{{livearr.endhou}}</text>时 <text class="djs-color">{{livearr.endmin}}</text>分 <text class="djs-color">{{livearr.endsec}}</text>秒</text>
							</text>
							
						</view>
						
						<view class="" v-else>
							<text class="flex flex-direction" style="font-size: 12px;width: 100px;">已结束</text>
						</view> -->
						<view class="sold">已售<text>{{detail.sales?detail.sales:0}}</text>件</view>
					</view>
				</view>
				<view class="market-name-box">
					<view class="title-desc">
						<view class="title-box">
							<text class="round-spec">产地直供</text>
							<text class="title">{{detail?detail.product.name:detail.title}}</text>
						</view>
						<!-- <view class="description">{{detail.remark}}</view> -->
						
					</view>
					
					<text @tap="showShare" style="width: 30px;float: right;background-color: #C1A061;color: #ffffff;font-size: 12px;text-align: center;" >分享好友</text>
					<!-- <view class="sold-share">
						<view class="sold">已售<text>{{detail.sales?detail.sales:0}}</text>件</view>
						<view class="share" @tap="showShare">分享好友</view>
					</view> -->
				</view>
				
				<view class="picker-box" v-if="detail && detail.product && detail.product.sketch != ''">
					<view class="picker-line">
						<text class="name">说明：</text>
						<text class="content">{{detail && detail.product ? detail.product.sketch : ''}}</text>
						<!-- <text class="cuIcon cuIcon-right"></text> -->
					</view>
				</view>
				
				
				
				<!-- <view class="picker-box">
					<view class="picker-line">
						<text class="name">邮费：</text>
						<text class="content" v-if="detail && detail.ship_price == 0">包邮|配送区域及实效|顺丰等物流</text>
						<text class="content" v-if="detail && detail.ship_price > 0"> {{detail.ship_name}} ￥{{detail.ship_price}} </text>
						<text class="cuIcon cuIcon-right"></text>
					</view>
				</view> -->
				
				<view class="join-box" v-if="detail.seven && detail.seven != ''">
					<block v-for="(it,i) in detail.seven" :key="i" v-if="detail.seven != [null]">
						<view class="member-box" v-if="it.member && it.member.id > 0">
							<image class="avatar" v-if="it.member && it.member.head_portrait != ''"  :src="it.member.head_portrait"></image>
							
							<image class="prize" v-if="i == 0" src="@/static/icon-one.png"></image>
							<image class="prize" v-else src="@/static/icon-prize.png"></image>
							<view class="num">{{parseInt(i) + 1}}</text>
							</view>
						</view>
						<view class="member-box" v-else>
							<image class="avatar" src="@/static/icon-wh.png"></image>
							
							<image class="prize" src="@/static/icon-prize.png"></image>
							<view class="num">{{parseInt(i) + 1}}</text>
							</view>
						</view>
						
						<!-- <view class="member-box" v-else>
							<image class="avatar" src="@/static/default-avatar.png"></image>
							<image class="prize" src="@/static/icon-prize.png"></image>
							<view class="num">2</text>
							</view>
						</view> -->
						
						<!-- <block v-if="it.children && it.children.length > 0" v-for="(its,is) in it.children" :key="is">
							<view class="member-box">
								<image class="avatar" :src="its.member.head_portrait"></image>
								<image class="prize" src="@/static/icon-prize.png"></image>
								<view class="num">{{i+1+is+1}}</text>
								</view>
							</view>
								<block v-if="it.children && it.children.length > 0 && its.children.length > 0" v-for="(itss,iss) in its.children" :key="iss">
									<view class="member-box">
										<image class="avatar" :src="itss.member.head_portrait"></image>
										<image class="prize" src="@/static/icon-prize.png"></image>
										<view class="num">{{i+1+is+1+iss+1}}</text>
										</view>
									</view>
								</block>
						</block> -->
						
						<!-- <view class="member-box" >
							<image class="avatar" src="@/static/default-avatar.png"></image>
							<image class="prize" src="@/static/icon-prize.png"></image>
							<view class="num">{{i+1+is+1}}</text>
							</view>
						</view> -->
							
					</block>
				</view>
				
				<view class="group-buy-box">
					<view class="total-detail">
						<text class="num">{{detail && detail.join_add > 0 ? parseFloat(detail.join_add) : 0}} </text>
						<text class="note">人在开团</text>
						
						<!-- <text class="status" v-if="detail && detail.join">当前你排在{{detail.orderByMember}}</text>
						<text class="status" v-else>未参与</text> -->
					</view>
					<view class="record-list" v-if="pg_list != '' && pg_list != null">
						<swiper autoplay="true" interval="3000" duration="500" circular="true" vertical="true" disable-touch="true">
							<block v-for="(pg,pi) in pg_list">
								<swiper-item>
									<view class="record">
										<image :src="pg.member.head_portrait"></image>
										<text>恭喜用户{{pg.member.nickname}}开团成功</text>
									</view>
								</swiper-item>
							</block>
							
						</swiper>
					</view>
				</view>
			</block>

			<block v-if="detail && detail.merchant">
				<view class="bg-white space-between padding margin-top align-center" @tap="goStore(detail.merchant)">
					<view class="cu-avatar default-bg lg round">
						<image :src="detail.merchant.logo" mode="aspectFill"></image>
					</view>
					<view class="w100 margin-left-sm">
						<view class="text-lg">{{detail.merchant.title}}</view>
						<view class="cu-tag sm margin-top-xs">
							<text v-if="detail.merchant.type==2">供应商</text>
							<text v-else>店铺</text>
						</view>
					</view>
					<view class="cuIcon cuIcon-right"></view>
				</view>
				<view class="bg-white space-between padding solid-top align-center" @tap="showLocation">
					<view class="w100 margin-left-sm">
						<text class="cuIcon cuIcon-location"></text>
						<text>{{detail.merchant.address_details}}</text>
					</view>
					<view>
						<text>{{mathLange}}</text>
						<text class="cuIcon cuIcon-right"></text>
					</view>
				</view>
			</block>
			
			<view class="bg-white margin-top-sm">
				<view class="solid-bottom" v-if="detail && detail.wholesale && detail.wholesale.length>0">
					<view class="space-between margin-lr align-center">
						<view class=" text-black text-bold  padding-tb-sm">直接参团 立即拼成</view>
					</view>
					<view class="cu-list ">
						<view class="cu-item margin-lr padding-tb-xs space-between align-center" v-for="(item,index) in detail.wholesale"
						 :key="index" v-if="index<wlength">
							<view class="flex flex-start align-center" @tap="goPage('/pages/shop/marketing/wholesale_detail?id=' + id + '&wholesale_id='+item.id)">
								<view class="cu-avatar default-bg round lg">
									<image src="" mode="aspectFill"></image>
								</view>
								<!-- <view class="margin-left-sm">{{item.member.nickname}}</view> -->
								<view class="margin-right-sm margin-left">
									<view class="">还差<text class="text-red">{{item.num - item.join_num}}人</text>成团</view>
									<view class="text-gray text-sm ">
										<CountDown :value="item.close_time" :skin="'skin3'" :beforTxt="'剩余：'"></CountDown>
									</view>
								</view>
							</view>
							<view class="flex flex-end align-center">
								<!-- <view v-if="item.member.id==member.id" class="cu-tag">我是团长</view> -->
								<view class="cu-btn round sm" :class="'bg-'+theme" @tap="goPage('/pages/shop/marketing/wholesale_detail?id=' + id + '&wholesale_id='+item.id)">去参团</view>
							</view>
						</view>
					</view>
					<view class="text-center text-blue padding-tb" v-if="detail.wholesale && detail.wholesale.length > wlength" @tap="wlength=100">更多</view>
				</view>
			</view>
			<view class="cu-list menu margin-top" style="display: none;">
				<view class="cu-item arrow">
					<view class="content text-bold ">
						<text class="text-sm">拼购玩法</text>
					</view>
					<view class="action  text-left w100 text-gray">
					</view>
				</view>
				<view class="bg-white overflow">
					<view class="bg-red light margin padding flex justify-between align-center">
						<view>参与拼团</view>
						<view class="cuIcon cuIcon-right"></view>
						<view>{{detail?detail.num:0}}人成团</view>
						<view class="cuIcon cuIcon-right"></view>
						<view>
							<view>拼中发货</view>
							<view>未拼中退款</view>
						</view>
						<view class="cuIcon cuIcon-right"></view>
						<view>
							<view>未拼中奖励</view>
							<view><text class="text-price text-xl text-bold">{{detail?detail.wholesale_reward:'0'}}</text>元红包</view>
						</view>
					</view>
				</view>
			</view>

			<view class="evaluate-box" v-if="comment != '' && comment != null">
				<view class="top-title">
					<view class="title">商品评价（{{comment[0].count}}）</view>
					<view class="more" @tap="goPage('/pages/shop/evaluate/list?goods_id='+detail.product_id)">查看全部<text class=" cuIcon-right"></text></view>
				</view>
				<block v-for="(com,i) in comment" :key="i">
					<view class="evaluate-item" >
					<view class="user-star">
						<image class="user-avatar" :src="com.member.head_portrait ? com.member.head_portrait : '../../static/default-avatar.png'"></image>
						<text class="user-name">{{com.member.nickname != '' ? com.member.nickname : com.member.username}}</text>
						<view class="star">
							<block v-for="(pic,i) in com.score_pic" :key="i">
								<image :src="pic"></image>
							</block>
						</view>
					</view>
					<view class="content" v-if="com.content != ''">{{com.content}}</view>
					<view class="thumbs" v-if="com.covers != '' &&  com.covers != null">
						<block v-for="(co,i) in com.covers" :key="i">
							<image :src="co"></image>
						</block>
						
					</view>
				</view>
				</block>
			</view>
			<view class="bg-white margin-top">
				<view class="overflow">
					<view class="text-center margin-tb text-lg text-black">—— 商品详情 ——</view>
					<view class="content" v-if="detail">
						<rich-text :nodes="detail.content"></rich-text>
					</view>
				</view>
			</view>
			
			
			

			<view class="main-ctr">
				<view class="blackbg round  text-white" @tap="onTop" v-if="scrollTop > 300">
					<text class="cuIcon-top"></text>
				</view>
			</view>

			<view class="cu-bar bg-white tabbar  shop  foot" v-if="detail">
				<view class="action text-black" @tap="goPage('/pages/shop/index')">
					<view class="cuIcon-home"></view> 首页
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class="action" open-type="contact">
					<view class="cuIcon-service text-black">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					客服
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<button class="action" @tap="openServiceModal">
					<view class="cuIcon-service text-black">
						<!-- <view class="cu-tag badge"></view> -->
					</view>
					客服
				</button>
				<!-- #endif -->
				<block v-if="detail && detail.join">
					<view class="cu-btn round light submit" style="height: 55px;color: #333333;">正在开团</view>
					
				</block>
				<block v-else>
					<!-- <view class="cu-btn round light submit" style="height: 55px;color: #333333;" v-if="detail.is_end == 0">场次已结束 等待下次开团</view> -->
					<!-- <view class="cu-btn round light submit" style="height: 55px;color: #333333;" v-else-if="detail.is_start == 0">场次未开始 等待下次开团</view> -->
					<view class="btn-group  margin-left" v-if="detail && detail.wholesale_join_rule == 1">
					<!-- <view class="btn-group  margin-left" v-if="detail && detail.wholesale_join_rule == 1 && detail.la_wh == 0 && detail.is_la_win == 0 && detail.is_fain == 0"> -->
						<!-- <button class="cu-btn round light w100 margin-right-sm" style="background-color: #000000;color: #ffffff;"  @tap="readyJoin(1, 0)">手动拼购</button> -->
						<button class="cu-btn round w100" :class="'bg-'+theme"  @tap="readyJoin(1, 0)">手动开团</button>
					</view>
					<!-- <view @tap="showPt()" class="btn-group  margin-left" v-else-if="detail && detail.wholesale_join_rule == 1 && detail.la_wh == 0 && detail.is_la_win > 0">
						<view class="cu-btn round light submit bg-yellow" style="height: 55px;color: #333333;">您已累计拼中({{detail.is_la_win}})次,点击继续拼下一个</view>
					</view>
					<view @tap="showPt()" class="btn-group  margin-left" v-else-if="detail && detail.wholesale_join_rule == 1 && detail.la_wh > 0 && detail.is_la_win == 0">
						<view class="cu-btn round light submit bg-yellow" style="height: 55px;color: #333333;">上场拼团({{detail.la_wh}})次未拼中,等待下场开团</view>
					</view>
					
					<view @tap="showPt()" class="btn-group  margin-left" v-else-if="detail && detail.wholesale_join_rule == 1 && detail.is_fain > 0">
						<view class="cu-btn round light submit bg-yellow" style="height: 55px;color: #333333;">秒杀券不足已退款到余额,点击重新拼团</view>
					</view> -->
					<!-- <view class="bg-blue submit" v-if="detail && detail.wholesale_join_rule == 1" @tap="readyJoin(1)">参团</view> -->
				</block>
				<!-- <view class="bg-blue light submit" v-if="detail && detail.wholesale_join_rule == 1" @tap="readyJoin(0)">参团</view> -->
			</view>
		</block>

		<view class="cu-modal bottom-modal" :class="modalName=='wholesaleModal'?'show':''" @tap="modalName=''">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">发起拼购</view>
					<view class="action" @tap="hideModal">
						取消
					</view>
				</view>
				<view class="bg-white padding-bottom">
					<view class="cu-bar margin-lr">
						<view class="title text-bold">订单商品</view>
					</view>
					<view class="space-between padding-lr" v-if="detail">
						<view class="cu-avatar lg bg-white">
							<image :src="detail.type==0?detail.product.picture:detail.picture" mode="aspectFill"></image>
						</view>
						<view class="w100 margin-left">
							<view class="text-overflow text-left">{{detail.type==0?detail.product.name:detail.title}}</view>
							<view class="space-between magin-top-xs">
								<text class="text-price text-orange">{{detail.type==0?detail.product.wholesale_price:detail.wholesale_price}}</text>
								<text>x1</text>
							</view>
						</view>
					</view>
					<view class="padding-lr text-left margin-top">
						<view class="text-bold margin-bottom-sm"><text class="cuIcon cuIcon-info"></text>发起说明</view>
						<view>团长发起拼团并在成团之后的抽奖中不会被抽中，从而获得相应奖励</view>

						<view class="margin-top cu-btn bg-blue lg round w100" @tap="applyWholesale">
							立即发起
						</view>
					</view>
				</view>
			</view>
		</view>



		<view class="cu-modal bottom-modal" :class="modalName=='joinModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择支付方式</view>
					<view class="action" @tap="hideModal">
						取消
					</view>
				</view>
				<view class="bg-white overflow text-left">
					<view class="  ">
						<view class="margin-lr-xl" v-if="member">
							<view class="space-between solid-bottom padding-tb-sm align-center" @tap="PaymentBingChange('wechat')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/h5/icon-wechat.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">微信支付</view>
									<view class="text-gray text-sm">推荐使用微信支付</view>
								</view>
								<view class="">
									<radio :class="payment=='wechat'?'checked':''" :checked="payment=='wechat'?true:false" value="wechat"></radio>
								</view>
							</view>
							<!-- <view class="space-between solid-bottom padding-tb-sm align-center" @tap="PaymentBingChange('gd')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/h5/icon-wechat.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">微信支付</view>
									<view class="text-gray text-sm">推荐使用微信支付</view>
								</view>
								<view class="">
									<radio :class="payment=='gd'?'checked':''" :checked="payment=='gd'?true:false" value="gd"></radio>
								</view>
							</view> -->
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('default')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">余额支付</view>
									<view class="text-gray text-sm">可用余额 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.user_money}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='default'?'checked':''" :checked="payment=='default'?true:false" value="default"></radio>
								</view>
							</view>
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('integral')">
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/icon-menu-2.png" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">积分支付</view>
									<view class="text-gray text-sm">可用积分 <text v-if="member.account" class="margin-left-sm text-red">{{member.account.user_integral}}</text></view>
								</view>
								<view class="">
									<radio :class="payment=='integral'?'checked':''" :checked="payment=='integral'?true:false" value="integral"></radio>
								</view>
							</view>
							<view class="space-between  padding-tb-sm align-center" @tap="PaymentBingChange('alipay')" >
								<view class="cu-avatar bg-white">
									<image src="https://attract-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/11/12/image_1605148466_y8CAI0ty.jpg" mode="aspectFit"></image>
								</view>
								<view class="w100 margin-left">
									<view class="text-black text-lg">支付宝支付</view>
									<view class="text-gray text-sm">推荐使用支付宝支付</view>
								</view>
								<view class="">
									<radio :class="payment=='alipay'?'checked':''" :checked="payment=='alipay'?true:false" value="alipay"></radio>
								</view>
							</view>
							<view class="w100 margin-tb-xl">
								<view class="cu-btn bg-yellow xl round w100" @tap="payOnSubmit">确定支付</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="page_footer" :class="modalName?'hidden':''">
			<image @tap="onLocation" src="../../../static/location.png" style="width: 80px;height: 80px;float: right;margin-right: 15px;"></image>
		</view> -->
		<wholesaleModal ref="wholesaleModal" v-on:submitJoinWholesale="submitJoinWholesale"></wholesaleModal>
		<couponModal ref="couponModal"></couponModal>

		<goodsModal ref="goodsModal" v-on:cartNumChange="cartNumChange" :marketingType="'wholesale'" @sureJoin="sureJoin"></goodsModal>
		<ShareView ref="ShareView"></ShareView>
		<serviceView ref="serviceView"></serviceView>
		<fastLink ref="fastLink"></fastLink>
		<Foot></Foot>
	</view>
</template>

<script>
	import wholesaleModal from '@/components/shop/marketing/wholesaleModal.vue'
	import CountDown from '@/components/default/CountDown.vue'
	import fastLink from '@/components/shop/fastLink.vue'
	import guessYouLikeView from '@/components/shop/marketing/guessYouLikeView.vue'
	import couponModal from '@/components/shop/marketing/couponModal.vue'
	import goodsModal from '@/components/shop/goodsModal.vue'
	import serviceView from '@/components/default/serviceView.vue'
	import ShareView from '@/components/default/ShareView.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			wholesaleModal,
			CountDown,
			fastLink,
			guessYouLikeView,
			goodsModal,
			couponModal,
			ShareView,
			serviceView,
			Foot,
		},
		computed: {
			...mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
			mathLange() {
				var merchant = this.detail.merchant
				let location = this.$common.getCache('location')
				console.log(location)
				if (location && merchant && merchant.latitude && merchant.longitude) {
					var lat1 = location.latitude
					var lat2 = merchant.latitude
					var lng1 = location.longitude
					var lng2 = merchant.longitude

					console.log(123)
					var radLat1 = lat1 * Math.PI / 180.0;
					var radLat2 = lat2 * Math.PI / 180.0;
					var a = radLat1 - radLat2;
					var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
					var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
						Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
					s = s * 6378.137; // EARTH_RADIUS;
					s = Math.round(s * 10000) / 10000;
					return s.toFixed(1) + 'km';
				} else return ''
			}
		},
		data() {
			return {
				id: 0,
				config: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				detail: null,
				swiperHeight: 0,
				swiperCurrent: 0,
				modalName: null,
				scrollTop: 0,
				cartNum: 0,
				error: false,
				member: null,
				wlength: 4,

				payment: 'wechat',
				payLoading: false,
				log: null,
				join_wholesale_id: 0,
				joinLog: null,
				hasMore:true,
				loading:false,
				comment:null,
				page:1,
				pg_list:[],
				pg_my:0,
				address_status:0,
				liveend:null,
				livearr:{
					endday:0,
					endhou:0,
					endmin:0,
					endsec:0,
					
					startday:0,
					starthou:0,
					startmin:0,
					startsec:0
				},
				join_view:0,
				join_in_num:0,
				param: {
					t: 0,
					product_id: 0,
					sku_id: 0,
				}
			};
		},
		onShow() {
			this.$common.getCartNum().then((num) => {
				this.cartNum = num
			})
			this.$common.getMember().then((member) => {
				this.member = member
				// uni.startPullDownRefresh({})
				this.getProduct()
				// this.pg_goods()
				// this.pg_times()
			})
			
		},
		onLoad(option) {
			this.id = option.id
			
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
			}
			if (option.share_id) {}
			this.$common.getConfig().then((config) => {
				this.config = config
				this.$nextTick(function() {
					// uni.startPullDownRefresh({})
				})
				
			})
			this.swiperHeight = this.windowWidth
			uni.setStorageSync('app_data', '')
			this.mathCacheSize()
		},
		
		onReady() {},
		methods: {
			// goWholesale(t){
			// 	this.$emit('sureJoin',{
			// 		t:t,
			// 		product_id:this.id,
			// 		sku_id:this.detail.product.sku.id
			// 	})
			// },
			mathCacheSize() {
				let app_data = uni.getStorageSync('app_data')
				this.cache_size = parseInt(JSON.stringify(app_data).length / 1024)
			},
			readyJoin(t, status) {
				uni.showLoading({
					'title' : '加载中...'
				})
				if (this.$common.getCache('address_select') == null) {
					
					uni.navigateTo({
						url:'/pages/member/address/list'
					})
					return
				}
				// if (this.address_status == 0) {
				// 	this.$common.showErrorModal('请先去填写收货地址')
				// 	setTimeout(function(){
				// 		uni.navigateTo({
				// 			url:'/pages/member/address/list'
				// 		})
				// 	}, 500)
				// 	return
				// } else {
					let param = this.param
					param.t = status;
					param.product_id = this.detail.product.id;
					param.sku_id = this.detail.product.sku[0].id;
					
					if (this.joinLog && this.joinLog.type == status) {
						this.$refs.goodsModal.hide()
						this.modalName = 'joinModal'
						this.payLoading = false
					} else {
						this.sureJoin(param)
					}
				// }
					
				
				
				// this.goWholesale(status)
				// console.log(this.detail.product.sku[0].id);
				// return false;
				
				// this.joinLoading = false
				// this.$refs.goodsModal.show()
				// this.modalName = 'joinModal'
			},
			showPt(){
				this.detail.la_wh = 0
				this.detail.is_la_win = 0
				this.detail.is_fain = 0
			},
			onLocation(){
				uni.startPullDownRefresh({})
			},
			getLiveTimeEnd(startTime){
				
				if(startTime){  //如果设置了开始时间
					this.liveEndTimes=setInterval(()=>{
			                        //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
						let transedPreTime=startTime.replace(/-/g,'/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						let obj = null;
						
						if(preTime - nowTime > 0){
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day<10?'0'+day:day,
								hou: hou<10?'0'+hou:hou,
								min: min<10?'0'+min:min,
								sec: sec<10?'0'+sec:sec
							};
							this.liveend=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.livearr.endday = obj.day
							this.livearr.endhou = obj.hou
							this.livearr.endmin = obj.min
							this.livearr.endsec = obj.sec
						} else {
							obj = {day:'00',hou:'00',min:'00',sec:'00'};
							this.liveend = null
							clearInterval(this.liveEndTimes)
						}  
					},1000)
				}else{
					this.liveend=null
				}
			},
			pg_times(){
				this.$http
					.get('pg_times', {
						id:this.id
					})
					.then((response) => {
						// console.log(response)
						
						if (response.data.data != null) {
							
							if (response.data.data.end_time != 0) {
								this.getLiveTimeEnd(response.data.data.end_time);
							}
						}
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			// pg_goods(){
			// 	this.$http
			// 		.get('pg_goods', {
			// 			id: this.id,
			// 		})
			// 		.then((response) => {
			// 			console.log(response)
			// 			this.pg_list = response.data.data.list
			// 			this.pg_my = response.data.data.my
			// 			this.address_status = response.data.data.address_status
			// 		})
			// 		.catch((response) => {
			// 			console.log(response)
			// 			uni.hideLoading()
			// 			this.loading = false;
			// 	})
			// },
			evaluate_goods(){
				console.log()
				if (!this.hasMore || this.loading) return
				this.loading = true;
				this.$http
					.post('evaluate_goods', {
						goods_id: this.detail.product_id,
						page:this.page
					})
					.then((response) => {
						console.log(response)
						let comment = this.comment
						if (response.data.data.length > 0) {
							comment =response.data.data
						} else {
							this.hasMore = false
						}
						this.comment = comment
						
						this.loading = false
						this.page++
						uni.stopPullDownRefresh()
						
					})
					.catch((response) => {
						console.log(response)
						uni.hideLoading()
						this.loading = false;
				})
			},
			sureJoin(param) {
				
				
				if (this.joinLoading) return
				this.joinLoading = true
				let address_id = 0;
				if (this.$common.getCache('address_select') != null) {
					let address = this.$common.getCache('address_select')
					address_id = address.id
				}
				this.$http.post('marketing_wholesale_join', {
						wholesale_product_id: this.id,
						type: param.t,
						product_id: param.product_id,
						sku_id: param.sku_id,
						address_id:address_id
					})
					.then((response) => {
						console.log(response)
						this.joinLog = response.data.data
						this.$refs.goodsModal.hide()
						this.modalName = 'joinModal'
						// this.payOnSubmit()
						this.payLoading = false
						this.joinLoading = false
					})
					.catch((response) => {
						if (response.data.code == '405') {
							this.$common.showError('请先去填写收货地址',()=>{
								uni.navigateTo({
									url:'/pages/member/address/list'
								})
							})
						}
						console.log(response.data.code)
						this.payLoading = false
						this.joinLoading = false
					})
			},
			swiperChannelHandle(e) {
				this.swiperCurrent = e.detail.current
			},
			openCouponModal() {
				this.$refs.couponModal.show()
			},
			openGoodsModal() {
				this.$refs.goodsModal.show()
				this.modalName = '1'
			},
			PaymentBingChange(e) {
				this.payment = e
			},
			getProduct() {
				this.$http
					.get('marketing_wholesale_product_seven_view', {
						id: this.id,
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						var detail = response.data.data
						// if (detail.type == 0) {
							detail.covers = detail.product.covers
							detail.content = detail.product.intro
						// }
						detail.content = this.$common.mathRichText(detail.content)
						this.detail = detail
						// this.detail.la_wh = 222;
						// this.detail.is_la_win = 222;
						this.evaluate_goods();
						
						this.pg_list = detail.list
						this.address_status = detail.address_status
						
						console.log(241)
						console.log(detail.seven)
						this.$nextTick((r) => {
							if (this.$refs.goodsModal) {
								this.$refs.goodsModal.setData(this.detail.product)
							}
							// if (this.$refs.CartModal) {
							// 	this.$refs.CartModal.setData(this.detail.merchant.id, this.detail.sku[0].id)
							// }
							// if (this.detail.canReceiveCoupon && this.detail.canReceiveCoupon.length > 0 && this.$refs.couponModal) {
							// 	this.$refs.couponModal.setData(this.detail.canReceiveCoupon)
							// }
						})

					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
						this.error = true
					})
			},

			goJoinWholesale(id) {
				// if (this.detail.wholesale_join_rule == 1) {
				// 	this.$refs.goodsModal.setWholesaleid(id)
				// 	this.$refs.goodsModal.buy('buy_now')
				// } else {
				// 	this.$common.showError('权限不足')
				// }
				// this.$refs.wholesaleModal.joinWholesale(id)
			},
			submitJoinWholesale(id) {
				this.$refs.goodsModal.show(id)
			},
			openServiceModal() {
				this.$refs.serviceView.show()
				
			},
			showShare() {
				if (this.detail) {
					this.$refs.ShareView.show({
						type: 'wholesale',
						id: this.detail.id,
						thumb: this.detail.type == 1 ? this.detail.product.picture : this.detail.picture,
						name: this.detail.type == 1 ? this.detail.product.name : this.detail.title,
						price: this.detail.type == 1 ? this.detail.product.wholesale_price : this.detail.wholesale_price,
						share_url: this.detail.share_url,
						member_id: this.member.id,
						member_name: this.member.nickname,
						member_head: this.member.head_portrait,
						reget: true
					})
				}
			},
			applyWholesale() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$http
					.post('marketing_wholesale_apply', {
						id: this.detail.id,
					})
					.then((response) => {
						uni.hideLoading()
						this.$common.showSuccess('开团成功', () => {
							uni.navigateTo({
								url: '/pages/shop/marketing/wholesale_detail?id=' + this.id + '&wholesale_id=' +
									response.data.data
							})
						})
					})
					.catch((response) => {
						uni.hideLoading()
					})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
				this.joinLoading = false
			},
			showFastModal() {
				this.$refs.fastLink.show()
			},
			onTop: function(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			BackPage() {
				uni.navigateBack({})
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop
			},
			cartNumChange(n) {
				this.cartNum = n
			},

			joinRandom() {
				this.onSubmit()
				// if (this.join_wholesale_id > 0) {
				// } else {
				// 	if (this.joinLoading) return
				// 	this.joinLoading = true
				// 	uni.showLoading({
				// 		title: '加载中'
				// 	})
				// 	this.$http
				// 		.get('marketing_wholesale_randomlog', {
				// 			id: this.id
				// 		})
				// 		.then((response) => {
				// 			var id = response.data.data
				// 			this.join_wholesale_id = id
				// 			this.joinLoading = false
				// 			this.onSubmit()
				// 		})
				// 		.catch((response) => {
				// 			uni.hideLoading()
				// 			this.joinLoading = false
				// 		})
				// }
			},
			onSubmit(type) {
				if (this.joinLoading) return
				this.joinLoading = true
				this.$http.post('marketing_wholesale_join', {
						wholesale_product_id: this.id,
						type: type,
						product_id: 0,
						sku_id: 0,
					})
					.then((response) => {
						this.joinLog = response.data.data
						this.payOnSubmit()
					})
					.catch((response) => {
						this.payLoading = false
					})

			},
			payUserMoney(frozen) {
				if (this.payLoading) return ;
				this.payLoading = true
				this.$http.post('pay', {
						pay_type: 5,
						order_group: "wholesale_seven",
						frozen: frozen,
						data: JSON.stringify({
							"log_id": this.joinLog.id
						})
					})
					.then((response) => {
						this.loading = false
						uni.hideLoading()
						console.log(response)
						this.$common.showSuccess('支付成功', (res) => {
							this.modalName=''
							this.getProduct()
							this.joinLoading = false
							this.payLoading = false;
							this.$common.rmCache('member')
							// uni.redirectTo({
							// 	url: "/pages/member/wholesale/detail?id=" + this.join_wholesale_id
							// })
						})
					})
					.catch((response) => {
						this.loading = false
						uni.hideLoading()
						console.log(response)
						this.loading = false
						this.payLoading = false
						this.joinLoading = false
					})
			},
			payOnSubmit() {
				let _this = this
				if(!this.joinLog) this.$common.showError('信息有误')
				if (this.payLoading ) return
				if (this.payment == 'integral') {
					var paym = this.joinLog.pay_money * this.config.integral_withdraw
					if (parseFloat(this.member.account.user_integral) < paym) {
						this.$common.showError('积分不足')
						this.joinLoading = false
						return
					}
					uni.showModal({
						title: '是否确定支付订单，将扣除积分￥' + paym,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(1)
							} else {
								_this.payLoading = false
								_this.joinLoading = false
							}
						},
						fail() {
							_this.payLoading = false
							_this.joinLoading = false
						}
					})
				} else if (this.payment == 'default') {
					if (parseFloat(this.member.account.user_money) < parseFloat(this.joinLog.pay_money)) {
						this.$common.showError('余额不足')
						this.joinLoading = false
						return
					}
					uni.showModal({
						title: '是否确定支付订单，将扣除余额￥' + this.joinLog.pay_money,
						success(res) {
							if (res.confirm) {
								_this.payUserMoney(0)
							} else {
								_this.payLoading = false
								_this.joinLoading = false
							}
						},
						fail() {
							_this.payLoading = false
							_this.joinLoading = false
						}
					})
				} else if (this.payment == 'gd') {
					this.$http.post('pay', {
							pay_type: 1,
							trade_type: 'gd',
							order_group: 'wholesale_seven',
							data: JSON.stringify({
								"log_id": this.joinLog.id
							})
						})
						.then((response) => {
							if (response.data.data.config) {
								window.location.href = decodeURIComponent(response.data.data.config.qrData)
							} else {
								this.$common.showError('配置有误')
							}
						})
						.catch((response) => {
							this.$common.showError('配置有误')
						})
				} else if (this.payment == 'wechat') {
					this.payLoading = true
					// #ifdef MP-WEIXIN
					this.mini_pay(this.id)
					// #endif

					// #ifdef H5
					this.$jwx.createPay('wholesale_seven', {
							"log_id": this.joinLog.id
						}).then((response) => {
							this.$common.showSuccess('支付成功', (r) => {
								this.getProduct()
								this.modalName=''
								this.joinLoading = false
								this.payLoading = false
								// uni.redirectTo({
								// 	url: "/pages/member/wholesale/detail?id=" + this.join_wholesale_id
								// })
							})
						})
						.catch((response) => {
							console.log(response)
							this.loading = false
							this.payLoading = false
							this.joinLoading = false

						})
					return
					// #endif

					// #ifdef APP-VUE
					this.$http.post('pay', {
							pay_type: 1,
							trade_type: 'app',
							order_group: 'wholesale_seven',
							data: JSON.stringify({
								"log_id": this.log.id
							})
						})
						.then((response) => {
							console.log(response)

							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: response.data.data.config,
								success: (e) => {
									this.payLoading = false
									this.joinLoading = false
									this.$common.showSuccess('支付成功', (r) => {
										this.joinLoading = false
										uni.redirectTo({
											url: "/pages/member/wholesale/detail?id=" + this.join_wholesale_id
										})
									})
								},
								fail: (e) => {
									console.log("fail", e);
									uni.showModal({
										content: "支付失败,原因为: " + e.errMsg,
										showCancel: false
									})

									this.payLoading = false

									this.joinLoading = false
								},
								complete: () => {
									this.payLoading = false
									this.joinLoading = false
								}
							})
						})
						.catch((response) => {
							console.log((response))
							this.loading = false
							this.payLoading = false
						})
					// #endif

				} else if (this.payment == 'alipay') {
					// #ifdef H5
					this.applypay();
					// #endif
					// #ifdef APP-VUE
					this.alipay()
					return 
					// #endif
				}else {
					this.$common.showError('请选择正确的支付方式')
				}
			},
			alipay(){
				console.log(323)
				this.$http.post('pay', {
					pay_type: 2,
					trade_type: 'app',
					order_group: 'wholesale_seven',
					data: JSON.stringify({
						"log_id": this.joinLog.id
					})
				})
				.then((response) => {
					uni.requestPayment({
							provider: 'alipay',
							orderInfo: response.data.data.config.config,
							success: (e) => {
								uni.showToast({
									title: "支付成功"
								})
								this.getProduct()
								this.modalName=''
								this.joinLoading = false
								this.payLoading = false
							},
							fail: (e) => {
								uni.showModal({
									//content: "支付失败,原因为: " + e.errMsg,
									content: "抱歉，您的支付不成功",
									showCancel: false
								})
								this.loading = false
							},
							complete: () => {
							}
						})
				})
				.catch((response) => {
					reject(response)
				})
			},
			goStore(merchant) {
				if (merchant.type == 1) {
					uni.navigateTo({
						url: "/merchantPackages/pages/store?id=" + merchant.id
					})
				}
			},
			applypay(){
				// #ifdef H5
				if (this.joinLog.id > 0) {
					var url = 'http://mg.mizhiyanshengwukeji.com/site/whrder?type=wholesale_seven&id=' + this.joinLog.id + '&member_id=' + this.member.id
					window.open(url)
				} else {
					this.$common.showError('支付参数错误')
					this.loading = false
					this.payLoading = false
					return 
				}
					
				// #endif
			},
			showLocation() {
				// console.log(this.detail.merchant.longitude+'-'+this.detail.merchant.latitude)
				uni.openLocation({
					longitude: parseFloat(this.detail.product.merchant.longitude),
					latitude: parseFloat(this.detail.product.merchant.latitude),
					success: (res) => {},
					fail: (error) => {
						this.$common.showError(error)
					}
				})
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/marketing/wholesale_seven?id=' + this.id
			if (this.member) path += "&share_id=" + this.member.id
			return {
				title: this.detail.name,
				imageUrl: this.detail.picture,
				path: path
			}
		},
		onPullDownRefresh() {
			this.getProduct()
		},
		onReachBottom() {
			// this.$refs.guessYouLikeView.getProduct()
		}
	}
</script>

<style>
	.page_footer {
		position: fixed;
		/* width: 100%; */
		/* left: 0; */
		right: 0;
		bottom: 20%;
		z-index: 9999999;
	}
	.page_footer.hidden{
		display: none;
	}
	.djs-color{
		color: #ffffff!important;
		padding: 2px!important;
		background: rgba(255,255,255, 0.3)!important;
	}
	.vtop {
		box-shadow: none;
		background-color: none;
	}

	.product-swiper .vtop {
		right: 20rpx;
		top: 20rpx;
		z-index: 65;
	}

	.vtop .cuIcon {
		background-color: rgb(0, 0, 0, 0.5);
		color: #FFF;
		border-radius: 50%;
		padding: 10rpx 12rpx;
	}

	.vtop .content {
		display: none;
	}

	.swiper-dot-view {
		right: 0;
		bottom: 10rpx;
		background-color: rgb(0, 0, 0, 0.3);
		border-radius: 20rpx 0 0 20rpx;
		padding: 5rpx 20rpx;
	}

	.share {
		border-radius: 0;
		font-size: 30rpx;
		padding: 0;
		background: none;
	}

	.share::after {
		display: none;
	}

	.product-name {
		line-height: 45rpx;
		text-align: justify;
	}

	.heightover {
		height: 100vh;
		overflow: hidden;
	}

	.border-radius-top {
		border-radius: 30rpx 30rpx 0 0 !important;
	}

	.color-view {
		width: 80rpx;
		height: 40rpx;
	}

	.cu-bar.tabbar.shop .action {
		width: 100upx;
	}

	.round-left {
		border-radius: 40rpx 0 0 40rpx;
	}

	.round-right {
		border-radius: 0 40rpx 40rpx 0;
	}

	.main-ctr {
		position: fixed;
		z-index: 99;
		bottom: 140rpx;
		right: 30rpx;
	}

	.blackbg {
		background-color: rgb(0, 0, 0, 0.5);
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.errorview {
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu .content {
		width: 100rpx;
		min-width: 100rpx;
	}

	.text-justify {
		text-align: justify;
	}

	.sharebtn {
		background-color: unset;
		font-size: unset;
		padding: 0;
		display: inline;
	}

	.sharebtn::after {
		content: unset;
	}
</style>

<style>
	.market-name-box{
		padding:  18rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.market-name-box .title-desc{
		flex: 1;
	}
	.title-desc .title-box{
		display: flex;
		align-items: center;
	}
	.title-desc .title-box .round-spec{
		flex-shrink: 0;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 44rpx;
		text-align: center;
		background-color: #FEED8C;
		border-radius: 15rpx;
		font-size: 24rpx;
		color: #000000;
		margin-right: 10rpx;
	}
	.title-desc .title-box .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.title-desc .description{
		font-size: 20rpx;
		color: #000000;
		line-height: 34rpx;
		opacity: 0.64;
	}
	.market-name-box .sold-share{
		width: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	.sold-share .solid{
		font-size: 22rpx;
		color: #000000;
		line-height: 15rpx;
		opacity: 0.8;
	}
	.sold-share .solid text{
		margin: 0 10rpx;
	}
	.sold-share .share{
		margin-top: 36rpx;
		width: 124rpx;
		height: 124rpx;
		background-color: #C3A060;
		border-radius: 10rpx;
		padding: 30rpx;
		text-align: center;
		line-height: 34rpx;
		font-size: 26rpx;
		color: #FFFFFF;
	}
</style>

<style>
	.picker-box{
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	.picker-line{
		padding: 20rpx 0;
		/* border-bottom: 1rpx solid #EAEAEA; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #707070;
	}
	.picker-line .name{
		margin: 0 12rpx;
		font-size: 26rpx;
		color: #3C3A3A;
		opacity: 0.70;
	}
	.picker-line .content{
		flex: 1;
		font-size: 24rpx;
		/* font-weight: bold; */
		color: #000000;
		/* opacity: 0.70; */
	}
	
	.group-buy-box{
		background-color: #FFFFFF;
		padding: 50rpx 30rpx;
	}
	.group-buy-box .total-detail{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.group-buy-box .total-detail .num{
		font-size: 38rpx;
		font-weight: bold;
		color: #990000;
		margin-right: 20rpx;
	}
	.group-buy-box .total-detail .note{
		flex: 1;
		font-size: 28rpx;
		color: #000000;
	}
	.group-buy-box .total-detail .status{
		font-size: 26rpx;
		color: #000000;
	}
	.group-buy-box .record-list{
		margin-top: 30rpx;
	}
	.record-list swiper{
		height: 80rpx;
	}
	.record-list swiper-item{
		height: 100%;
	}
	.record-list .record{
		height: 100%;
		display: flex;
		align-items: center;
	}
	.record-list .record image{
		width: 80rpx;
		height: 80rpx;
		border: 1rpx solid #EAEAEA;
		margin-right: 20rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.record-list .record text{
		font-size: 34rpx;
		color: #000000;
		line-height: 34rpx;
	}
</style>

<style>
	.evaluate-line{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #707070;
	}
	.evaluate-line .name{
		font-size: 28rpx;
		color: #000000;
	}
	.evaluate-box{
		margin-top: 10rpx;
		background-color: #FFFFFF;
		padding: 10rpx 30rpx 40rpx;
	}
	.evaluate-box .top-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-title .title{
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-title .more{
		font-size: 26rpx;
		color: #999999;
	}

	.evaluate-item{
		padding-top: 30rpx;
	}
	.evaluate-item .user-star{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .user-avatar{
		border: 1rpx solid #EAEAEA;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		margin-right: 12rpx;
		flex-shrink: 0;
	}
	.user-star .user-name{
		flex: 1;
		font-size: 28rpx;
		color: #999999;
	}
	.user-star .star{
		width: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.user-star .star image{
		width: 17rpx;
		height: 17rpx;
	}
	
	.evaluate-item .content{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
	}
	
	.evaluate-item .thumbs{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}
	.evaluate-item .thumbs image{
		width: 144rpx;
		height: 154rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-right: 36rpx;
	}
	.evaluate-item .thumbs image:nth-child(4n){
		margin-right: 0;
	}
	
	
	.join-box{
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		flex-wrap: wrap;
		background-color: #ffffff;
		padding-left: 30rpx;
	}
	.join-box .member-box{
		margin-top: 40rpx;
		width: 92rpx;
		height: 92rpx;
		margin-right: 10rpx;
		position: relative;
	}
	.join-box .member-box:nth-child(7n){
		margin-right: 0;
	}
	.member-box .avatar{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 50%;
	}
	.member-box .prize{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: -8rpx;
		top: -20rpx;
	}
	.member-box .num{
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		transform: rotate(40deg);
		font-size: 24rpx;
		color: #FFFFFF;
		position: absolute;
		right: -8rpx;
		top: -20rpx;
	}
</style>

